import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { personalizedApi } from '@/api/recommend';
import PlaylistItem from '@/components/playlist-item/PlaylistItem';

const containerStyle = {
  paddingTop: '30px',
}

const titleStyle = {
  textAlign: 'left',
  fontSize: '26px',
  fontWeight: 'bold',
  marginTop: '10px',
}

const playlistStyle = {
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  padding: '10px 0',
}

export default function Playlist() {
  const [playlist, setPlaylist] = useState([])
  const navigate = useNavigate()
  // 获取推荐歌单
  const getPlaylist = async () => {
    const { result: playlistArr } = await personalizedApi()
    // console.log('歌单', playlistArr)
    setPlaylist(playlistArr)
  };
  // 路由跳转到歌单详情页面
  const routerToPlayListDetail = (id) => {
    navigate(`/playlist?id=${id}`)
  }
  useEffect(() => {
    getPlaylist()
  }, []);
  return (
    <div style={containerStyle}>
      <div style={titleStyle}>推荐歌单</div>
      <section style={playlistStyle}>
        {
          playlist.map(item => {
            return <PlaylistItem key={item.id} {...item} height={250} width={250} routerToPlayListDetail={routerToPlayListDetail} />
          })
        }
      </section>
    </div>
  )
}
